<template>
	<div class="top-title">
		<span>日志</span>
		<div>
			<el-date-picker
				v-model="searchDate"
				type="daterange"
				unlink-panels
				range-separator="To"
				start-placeholder="开始日期"
				end-placeholder="结束日期"
				:shortcuts="shortcuts"
				:size="size"
				format="YYYY-MM-DD"
				value-format="YYYY-MM-DD"
				@change="changeForDate"
			/>
		</div>
	</div>
	<div class="source-box" style="width: 100%;height: calc(100% - 38px);">
		<div class="list-wrap">
			<div class="float scroll min" style="height: 100%;overflow: hidden;">
				<el-table
				  :v-loading="loading"
				  :data="tableData"
				  style="width: 100%; margin-bottom: 5px;height: calc(100% - 0px);"
				>
					<el-table-column prop="scenename" label="场景名称"  />
					<el-table-column prop="username" label="场景用户"  />
					<el-table-column prop="agentname" label="渲染端"  />
					<el-table-column prop="agentip" label="渲染端IP"  />
					<el-table-column prop="gpuname" label="GPU型号"  />
					<el-table-column prop="gpuindex" label="GPU序号" width="100"  align="center" />
					<el-table-column prop="message" label="状态"  />
 					<el-table-column prop="onlineTime" label="使用时间" width="300" >
						<template #default="scope">
							<span>{{scope.row.onlineTime}}</span> ~ <span>{{scope.row.offlineTime}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="createTime" label="创建时间"  />
				</el-table>
			</div>
			<div class="list-paging-box" v-show="_totalPage>1">
				<el-pagination small background layout="prev, pager, next" :page-size="_pageSize" :total="_total" @current-change="currentChange" />
			</div>
		</div>	
	</div>	
</template>

<script lang="ts" setup>
	import {ref } from 'vue'
	import { pagesForRenderLog} from "@/api/agent";
	const size = ref<'default' | 'large' | 'small'>('default')
	const loading = ref(false);
	
	const _cur=ref(1);
	const _total=ref(0);
	const _totalPage=ref(0);
	const _pageSize=ref(10);
	
	const searchDate = ref(null)
	
	const shortcuts = [
	  {
	    text: '最近一周',
	    value: () => {
	      const end = new Date()
	      const start = new Date()
	      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
	      return [start, end]
	    },
	  },
	  {
	    text: '最近一月',
	    value: () => {
	      const end = new Date()
	      const start = new Date()
	      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
	      return [start, end]
	    },
	  },
	  {
	    text: '最近3个月',
	    value: () => {
	      const end = new Date()
	      const start = new Date()
	      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
	      return [start, end]
	    },
	  },
	]
	
	const currentChange=(cur:number)=>{
		_cur.value= cur
		load();
	}
	
	const tableData=ref([]);
	const load=()=>{
		loading.value=true;
		pagesForRenderLog({
			startTime:searchDate.value?.[0],
			endTime:searchDate.value?.[1],
			cur:_cur.value,
			limit:_pageSize.value
		})
		.then(({result}) => {
			const _data=result
			_total.value=_data.totalRow
			_totalPage.value=_data.totalPage
			tableData.value= _data.list
		})
		.catch((e:any) => {
		})
		.finally(() => {
			loading.value=false;
		});
	}
	
	const changeForDate=(e)=>{
		load();
	}
	defineExpose({ load })
	onMounted(() => {
		//load();
	});
</script>

<style>
</style>